<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <script>
        //  1.var getName; 提前声明
        //  2.function getName() { alert(5); } 函数提升
        function Foo() {
            getName = function () { alert(1); }; // 4.重新赋值 getName
            return this;
        }
        

        Foo.getName = function () { alert(2); }; // 静态方法 
        Foo.prototype.getName = function () { alert(3); }; // 

        // 3. getName = function () { alert(4); }; // 赋值运算
        var getName = function () { alert(4); }; // 

        function getName() { alert(5); }

        /******************************************/

        Foo.getName(); // 调用 Foo 的静态方法 => 2

        getName(); // 4

        // 执行到 getName的第四步
        Foo().getName(); // Foo()执行完返回 window，就相当于 window.getName() => 1

        getName(); // => 1

        new Foo.getName(); //  => 2
        /*
        new 的是 静态函数 Foo.getName() 将 Foo 的静态函数 使用 构造函数的方式调用
        new function () { alert(2); } 来调用        
        */ 


        new Foo().getName(); // => 3
        /*
        new Foo() 构造函数的方式先调用 Foo函数 假设得到一个对象 f
        f.getName(); 相当于调用了 Foo() 函数原型对象上的方法 
        */ 
        new new Foo().getName(); // => 3

        /*
        new (new Foo()).getName(); 先得到 new Foo() 创建的对象 f
        new f.getName() 相当于你使用 构造函数的调用方式 调用 Foo()函数原型对象上的 方法
        
        */ 



    </script>

</body>

</html>